<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="资讯类型" prop="news_type">
            <el-select v-model="news_type_id" placeholder="请选择资讯类型">
              <el-option
                v-for="(oVal, oIdx) of status"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <!-- <el-table-column prop="id" label="id" /> -->
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="create_time" width="160px" label="创建时间" />
        <el-table-column prop="source" width="120px" label="发布来源" />
        <el-table-column prop="view_num" width="120px" label="已读人数" />
        <el-table-column prop="banner" label="缩略图">
          <template slot-scope="{ row }">
            <el-image
              style="width: 150px; height: auto"
              :src="row.banner"
              :preview-src-list="[row.banner]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditDetail(row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="delConsultById(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pagination.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      :title="houseForm.$id ? '编辑' : '新增'"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="() => closeDialog()"
    >
      <el-form
        :model="houseForm"
        :rules="houseRules"
        ref="houseForm"
        label-width="6em"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="houseForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布来源"  prop="source">
          <el-input
            v-model="houseForm.source"
            placeholder="请输入发布来源"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="是否置顶" prop="is_top">
          <el-switch v-model="houseForm.is_top"></el-switch>
        </el-form-item>
        <el-form-item class="span-2" label="是否为外链" prop="is_link">
          <el-switch v-model="houseForm.is_link"></el-switch>
        </el-form-item>
         <el-form-item v-if="houseForm.is_link" label="链接" prop="url">
          <el-input
            v-model="houseForm.url"
            placeholder="请输入公约链接"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="阅读数" prop="view_num">
          <el-input
            v-model="houseForm.view_num"
            placeholder="请输入阅读数"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="活动类型" prop="news_type">
        <el-select v-model="houseForm.news_type_id" placeholder="请选择活动类型">
          <el-option
            v-for="(oVal, oIdx) of status"
            :key="oIdx"
            v-bind="oVal"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="缩略图" prop="banner">
          <Upload
            v-model="houseForm.banner"
            :file.sync="houseForm.banner"
          />
        </el-form-item>
        <el-form-item prop="content" hidden />
        <tinymce v-model="houseForm.content" height="300" />
      </el-form>
      <template #footer>
         <el-button
          type="primary"
          @click="submit()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit } from "@/utils/mixins";
import Tinymce from "@/components/Tinymce";
import Upload from "@/components/Upload/SingleImage.vue";
export default {
  components: {
    Tinymce,
    Upload,
  },
  mixins: [table, addOrEdit],
  data: () => ({
    showAddOrEdit:false,
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    pagination: {
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },
    news_type_id:2,
    houseForm: {
      $id: '',
      title: "",
      content: "",
      is_link:false,
      url:"",
      is_top:false,
      source: "",
      banner: "",
      view_num:0,
      news_type_id: 2,
    },
    houseRules: {},

    status: [
      { label: "邻里大小事", value: 2 },
      { label: "政策信息", value: 3 },
      { label: "创业资讯信息", value: 4 },
      { label: "社区事务", value: 5 },
      { label: "积分规则", value: 6 },
      { label: "其他", value: 7},
    ],

    // showAddOrEdit: true,
  }),


  created:function(){
    this.getPermissionList()
  },

  methods: {
    Search(){
      this.getPermissionList()
    },

    // 分页
    changeSize(val){
      this.pagination.per_page = val
      this.searchForm.page = 1
      this.getPermissionList()
    },

    // 分页
    changeCurrent(val){
      this.pagination.page = val
      this.getPermissionList()
    },

    // 获取资讯列表
    getPermissionList(){
      this.loading=true
      API.getNeighborNewsList(this.news_type_id,this.pagination)
        .then(({data}) => {
          let consultList = data.items.map(item=>{
            return {
              id:item.id,
              title:item.title,
              create_time:item.create_time,
              source:item.source,
              view_num:item.view_num,
              banner:item.banner
            }
          })
          this.tableData=consultList
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 新增弹窗
    add(){
      this.houseForm.$id=""
      this.showAddOrEdit=true
    },



    // 删除
    delConsultById(id){
      let _that=this
      this.$confirm(`是否删除改条数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delNeighborNews(id)
        .then(({data}) => {
        }).catch((err) => {
        }).finally(() =>{
          _that.getPermissionList()
        })
      })
      .catch(() => {
      });


    },

    // 打开弹窗
    openEditDetail(id){
      this.houseForm.$id=id
      API.getNeighborNewsDetail(id)
        .then(({data}) => {
          this.houseForm.$id=data.id
          this.houseForm.title=data.title,
          this.houseForm.is_link=data.is_link,
          this.houseForm.is_top=data.is_top,
          this.houseForm.content=data.content
          this.houseForm.url=data.url,
          this.houseForm.source=data.source,
          this.houseForm.view_num=data.view_num
          this.houseForm.banner=data.banner
        }).catch((err) => {
        }).finally(() =>{
          this.showAddOrEdit=true
        })
    },

    // 关闭弹窗
    closeDialog(){
      this.resetForm()
    },

    // 提交
    submit(){
      let data={
        title:this.houseForm.title,
        content:this.houseForm.content,
        is_link:this.houseForm.is_link?1:0,
        is_top:this.houseForm.is_top?1:0,
        url:this.houseForm.url,
        source:this.houseForm.source,
        banner:this.houseForm.banner,
        view_num:this.houseForm.view_num,
        news_type_id:this.houseForm.news_type_id,
      }
      if(!this.houseForm.title.trim()) return this.$message.error("标题不可为空~~");
      if(!this.houseForm.source.trim()) return this.$message.error("文章来源不可为空~~")
      if(!this.houseForm.banner.trim()) return this.$message.error("活动图片不可为空~~")
      if(this.houseForm.is_link&&!this.houseForm.url.trim()) return this.$message.error("请输入外链地址~~")
      if(!this.houseForm.content.trim()) return this.$message.error("活动详情不可为空~~")
      if(this.houseForm.$id){
        let id=this.houseForm.$id
        data.id=id
        API.editNeighborNews(data)
        .then(({data}) => {
          this.$message.success("编辑成功！");
        }).catch((err) => {
        }).finally(() =>{
          this.resetForm()
          this.getPermissionList()
        })
      }else{
        API.addNeighborNews(data)
          .then(({data}) => {
            this.$message.success("新增成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getPermissionList()
          })
      }
    },

    // 重置弹窗
    resetForm(){
      this.houseForm.$id=""
      this.houseForm.title=""
      this.houseForm.content=""
      this.houseForm.is_link=false
      this.houseForm.is_top=false
      this.houseForm.url=""
      this.houseForm.source=""
      this.houseForm.banner=""
      this.houseForm.view_num=0
      this.showAddOrEdit=false
    },

  },
};
</script>

<style lang="scss" scoped>
  ::v-deep{
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
  }
</style>
